<template>
    <!-- ec-canvas/wallet/orderstatistics/index.wxml -->
    <view>
        <view class="flexbox-sb centers box1">
            <view class="centers" @tap="showTime">
                <!-- <picker class="box1text1 mr-10" mode="date" fields="day" value="{{currentDate}}" start="{{minDate}}" end="{{maxDate}}" bindchange="onInputTime">
        <view class="picker">{{nowtime}}</view>
      </picker> -->
                <picker mode="multiSelector" :value="dateTime" @change="changeDateTime" :range="dateTimeArray">
                    <view class="picker">{{ nowtime }}</view>
                </picker>
                <view class="jiao"></view>
            </view>
            <view class="centers" @tap="showType">
                <picker @change="onChangeType" :value="index" :range="showtypeList">
                    <view class="picker">{{ showtypeList[index] }}</view>
                </picker>
                <view class="jiao"></view>
            </view>
        </view>
        <view class="flexbox-sb stics_z">
            <view>
                <view class="stics_hair">美发师数量</view>
                <view class="stics_hair_num">{{ orderHairCount }}</view>
            </view>
            <view>
                <view class="stics_order_num">总计</view>
                <view class="stics_order_num">{{ orderNum }}单</view>
            </view>
            <view>
                <view class="stics_income">收入</view>
                <view class="stics_income_money">¥{{ orderMoney }}</view>
            </view>
        </view>
        <view>
            <view class="stics_box" @tap="onDetails" :data-item="item" v-for="(item, index) in orderList" :key="index">
                <view>
                    <view class="mr-20">
                        <image class="headimg" :src="item.stylistPhotoPath"></image>
                    </view>
                    <view class="stics_centers">
                        <view class="stics_name">{{ item.stylistNickName }}</view>
                        <view class="stics_job mt-10">{{ item.nexus == 0 ? '网约美发师' : '店内美发师' }}</view>
                    </view>
                </view>

                <view class="stics_num">{{ item.stylistOrderCount }}单</view>

                <view class="stics_money">¥{{ item.storeAmount }}</view>
            </view>
            <view class="w-100" v-if="orderList.length == 0">
                <van-empty description="暂无数据" />
            </view>
        </view>
    </view>
</template>

<script>
import vanProgress from '@/wxcomponents/vant/dist/progress/index';
import vanEmpty from '@/wxcomponents/vant/dist/empty/index';
// ec-canvas/wallet/orderstatistics/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
import { getTime } from '../../../utils/util.js'; // 引入utils;

const moment = require('../../../utils/moment.min');

const dateTimePicker = require('../../../utils/dateTimePicker.js');

export default {
    components: {
        vanProgress,
        vanEmpty
    },
    data() {
        return {
            hairimgUrl: app.globalData.hairimgUrl,
            //全局美发师img路径
            currentDate: moment().format('YYYY-MM-DD'),
            minDate: moment().subtract(3, 'year').format('YYYY-MM-DD'),
            maxDate: moment().format('YYYY-MM-DD'),
            showtypeList: ['全部', '网约美发师', '店内美发师'],
            index: 0,
            nowtime: '',
            nowtime1: '',
            typetit: '全部',
            typetit1: '全部',
            type: 3,
            showtype: false,
            showtime: false,
            detailList: [],
            page: 1,
            gettime: '',
            type: 0,
            orderList: [],
            orderHairCount: 0,
            // 美发师数量
            orderMoney: 0,
            // 订单收入
            orderNum: 0,
            // 订单数量
            dateTimeArray: null,
            // 日期数组
            startYear: 2015,
            // 开始日期
            endYear: 2100,
            // 结束数组
            dateTime: '' // 默认值
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let gettime = getTime(new Date().getTime(), 8);
        this.setData(
            {
                gettime
            },
            () => [this.getstoreOrderDetail()]
        ); // 获取完整的年月日，以及默认显示的数组

        let obj = dateTimePicker.newDateTimePicker(this.startYear, this.endYear);
        this.setData({
            dateTimeArray: obj.dateTimeArray,
            dateTime: obj.dateTime
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () { },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let time = getTime(new Date().getTime(), 6);
        this.setData({
            nowtime: time
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () { },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () { },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.setData(
            {
                page: 1
            },
            () => {
                this.getstoreOrderDetail(true);
            }
        );
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData(
            {
                page: this.page + 1
            },
            () => {
                this.getstoreOrderDetail(false);
            }
        );
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () { },
    methods: {
        changeDateTime(e) {
            const { dateTimeArray } = this;
            let nowtime =
                dateTimeArray[0][e.detail.value[0]] +
                dateTimeArray[1][e.detail.value[1]] +
                (dateTimeArray[2][e.detail.value[2]] != '--' ? dateTimeArray[2][e.detail.value[2]] : '');
            let gettime = nowtime.replace(/[^0-9]/gi, '');
            this.setData(
                {
                    detailList: [],
                    nowtime,
                    gettime,
                    page: 1
                },
                () => [this.getstoreOrderDetail()]
            );
        },

        // 订单明细
        onDetails(e) {
            const { item } = e.currentTarget.dataset;
            let newItem = {
                gettime: this.gettime,
                ...item
            };
            let data = JSON.stringify(newItem);
            console.log(e);
            uni.navigateTo({
                url: '/ec-canvas/wallet/orderstatistics/hiarorderdetails/index?data=' + data
            });
        },

        // 显示时间弹窗
        showTime() {
            this.setData({
                showtime: true
            });
        },

        // 关闭窗口
        onCloseTime() {
            this.setData({
                showtime: false
            });
        },

        // 获取时间
        onInputTime(event) {
            let dt = event.detail.value;
            this.setData(
                {
                    detailList: [],
                    currentDate: dt,
                    nowtime: moment(dt).format('YYYY年MM月DD日'),
                    gettime: moment(dt).format('YYYYMMDD'),
                    page: 1
                },
                () => [this.getstoreOrderDetail()]
            );
        },

        // 显示类型弹窗
        showType() {
            this.setData({
                showtype: true
            });
        },

        // 关闭窗口
        onCloseType() {
            this.setData({
                showtype: false
            });
        },

        // 获取选择类型
        onChangeType(event) {
            const index = event.detail.value;
            this.setData(
                {
                    index: index,
                    type: index,
                    page: 1
                },
                () => [this.getstoreOrderDetail()]
            );
        },

        // 订单服务数据 0：全部 1：网约  2：店内
        getstoreOrderDetail(show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/storeOrderDetail/getStoreStylistAllOrderCountById', {
                    storeId: uni.getStorageSync('storeId'),
                    type: this.type,
                    date: this.gettime,
                    pageNo: this.page,
                    pageSize: 10
                })
                .then((res) => {
                    if (res.data.code == 200 && res.data.data != null && res.data.data.length > 0) {
                        let data = res.data.data;
                        let strMoney = 0;
                        let strNum = 0;
                        data.map((item, index) => {
                            strMoney += item.storeAmount;
                            strNum += item.stylistOrderCount;
                        });
                        this.setData({
                            orderList: this.page > 1 ? [...this.orderList, ...data] : data,
                            orderHairCount: data[0].stylistCount,
                            orderMoney: strMoney,
                            orderNum: strNum
                        });
                        console.log(this);
                    } else {
                        this.setData({
                            orderList: [],
                            orderHairCount: 0,
                            orderMoney: 0,
                            orderNum: 0
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                });
        }
    }
};
</script>
<style>
/* ec-canvas/wallet/orderstatistics/index.wxss */
.box1 {
    width: 100%;
    height: 100rpx;
    border-bottom: 1px solid #ededed;
    padding: 0 40rpx;
    box-sizing: border-box;
}

.box1text1 {
    height: 50rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
}

.jiao {
    width: 0px;
    height: 0px;
    border-top: 12rpx solid #333333;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
}

.stics_z {
    margin: 0 40rpx;
    padding: 30rpx 0;
}

.stics_z>view {
    text-align: center;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
}

.stics_z>view:nth-child(2) {
    margin-right: 20rpx;
}

.stics_income_money {
    color: #ff1717;
}

.stics_box {
    width: 670rpx;
    border-top: 2rpx solid #ededed;
    height: 144rpx;
    padding: 32rpx 0;
    box-sizing: border-box;
    margin: 0 40rpx;
    display: flex;
    flex-wrap: nowrap;
}

.stics_box>view:nth-child(1) {
    height: 80rpx;
    display: flex;
    flex-wrap: nowrap;
    width: 340rpx;
}

.stics_box>view:nth-child(2),
.stics_box>view:nth-child(3) {
    line-height: 80rpx;
    width: 92rpx;
}

.stics_box>view:nth-child(2) {
    margin-right: 180rpx;
    min-width: 80rpx;
}

.stics_centers {
    display: flex;
    flex-wrap: wrap;
    width: 120rpx;
}

.headimg {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
}

.stics_name {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
    width: 200rpx;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stics_job {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
    width: 120rpx;
}

.stics_num {
    text-align: center;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 144rpx;
    width: 100%;
}

.stics_money {
    text-align: right;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 144rpx;
    width: 100%;
}
</style>
